<template>
  <div>
    <div class="form">
      <div>
        <label>真实姓名：</label>
        <input type="text" v-model="form.realName" placeholder="请输入真实姓名">
      </div>
      <div>
        <label>身份证号：</label>
        <input type="test" v-model="form.idCard" placeholder="请输入身份证号">
      </div>
    </div>
    <button class="btn" @click="nextStepClick">下一步</button>
  </div>
</template>

<script>
import { SET_REAL_NAME } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: {}
    }
  },
  computed: {
    bizUserId () {
      return this.$root.$mp.query.bizUserId
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {},
  methods: {
    nextStepClick () {
      const vm = this
      if (!vm.form.realName) {
        vm.$toast('姓名不能为空')
        return false
      } else if (!vm.form.idCard) {
        vm.$toast('身份证号码不能为空')
        return false
      } else if (vm.form.idCard.length < 15 || vm.form.idCard.length > 18) {
        vm.$toast('身份证号码长度有误')
        return false
      }
      vm._sendIdCardInfo()
    },
    _sendIdCardInfo () {
      const vm = this
      SET_REAL_NAME(vm.bizUserId, vm.form.realName, vm.form.idCard)
        .then(r => {
          console.log(r)
          if (r.data.code === '0') {
            vm.$router.replace('/pages/mine/cloud-account/step3/personal/main')
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  div {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 10px 0;
    label {
      font-weight: 500;
      margin: 0 10px;
    }
    input {
      width: 200px;
      height: 40px;
      border-radius: 4px;
      // border: 1px solid #9a9a9a;
      padding-left: 20px;
    }
  }
}
.btn {
  width: 350px;
  height: 40px;
  border-radius: 25px;
  background: #5d93fd;
  color: #fff;
  margin: 70px auto 0;
  font-size: 14px;
}
</style>